<template>
  <div v-if="showDevice">
    <el-dialog title="添加设备" :visible.sync="showDevice" width="75%" @close="closeDialog" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form ref="tableParams" :inline="true" :model="tableParams" size="small">
        <el-form-item :label="$root.lang.control.device.list.deviceName">
          <el-input v-model="tableParams.deviceName"></el-input>
        </el-form-item>
        <el-form-item :label="$root.lang.control.device.list.IMEI">
          <el-input v-model="tableParams.imei"></el-input>
        </el-form-item>
        <el-form-item :label="$root.lang.control.device.list.activeState">
          <el-select v-model="tableParams.isActivation" :placeholder="$root.lang.control.device.list.select" clearable>
            <el-option
              v-for="item in setState.activeState"
              :key="item.value"
              :label="item.title"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$root.lang.control.device.list.connectState">
          <el-select v-model="tableParams.isConnection" :placeholder="$root.lang.control.device.list.select" clearable>
            <el-option
              v-for="item in setState.connectState"
              :key="item.value"
              :label="item.title"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$root.lang.control.device.list.bindState">
          <el-select v-model="tableParams.isBinding" :placeholder="$root.lang.control.device.list.select" clearable>
            <el-option
              v-for="item in setState.bindState"
              :key="item.value"
              :label="item.title"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="searchAction()">{{ $root.lang.control.device.list.query }}</el-button>
          <el-button size="small" @click="searchAction(true)">{{ $root.lang.control.device.list.empty }}</el-button>
        </el-form-item>
      </el-form>

      <el-table
      v-loading="listLoading"
      :data="deviceList"
      :empty-text="$root.lang.control.device.list.noData"
      size="small"
      border
      style="width: 100%"
       @selection-change="choseDevice"
      >
      <el-table-column
          type="selection"
          align="center"
          width="55">
        </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.device.list.deviceName">
        <template slot-scope="scope">
          <span>{{ scope.row.deviceName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.device.list.IMEI">
        <template slot-scope="scope">
          <span>{{ scope.row.imei }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="210"
        align="center"
        :label="$root.lang.control.device.list.appInfo">
        <template slot-scope="scope">
          <span v-if="scope.row.appDetails.length == 0">--</span>
          <p v-if="scope.row.appDetails.length > 0" style="text-align: left;" v-for="(itemApp, index) in scope.row.appDetails" :key="index"><span style="margin-right:15px;">{{ index+1 }}.</span>
          {{ itemApp.appIdentification }}&nbsp;&nbsp;&nbsp; {{ itemApp.appV }} &nbsp;&nbsp;&nbsp; {{ baseState.appState, itemApp.state ,'--' | matchValue }} </p>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.device.list.activeState">
        <template slot-scope="scope">
          <p>{{ setState.activeState, scope.row.isActivation, '--' | matchValue }}</p>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.device.list.connectState">
        <template slot-scope="scope">
          <p>{{ setState.connectState, scope.row.isConnection, setState.connectState["0"].title | matchValue }}</p>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.device.list.bindState">
        <template slot-scope="scope">
          <p>{{ setState.bindState, scope.row.isBinding, '--' | matchValue }}</p>
        </template>
      </el-table-column>
      <el-table-column
        width="180"
        align="center"
        :label="$root.lang.control.device.list.lastHeartTime">
        <template slot-scope="scope">
          <span>{{ scope.row.lastHeartTime | dateFormat }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="tableTotal>0"
      @size-change="sizeChange"
      @current-change="pageChange"
      @prev-click="pageChange"
      @next-click="pageChange"
      :current-page="tableParams.pageNum"
      :page-sizes="[10, 30, 50, 100]"
      :page-size="tableParams.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="tableTotal">
    </el-pagination>
    <el-form size="small" style="margin-top:20px;">
      <el-form-item >
        <span>已选择 {{ choseData.length }}个设备</span>
        <el-button class="pull-right" type="primary" size="small" @click="choseDone" :loading="loading">确认</el-button>
      </el-form-item>
    </el-form>

    </el-dialog>
  </div>
</template>


<script>
import '@/options/deviceState'
import '@/options/baseState'
export default {
  name: 'DeviceChose',
  data() {
    return {
      listLoading: false,
      loading: false,
      showDevice: this.show,
      value: '',
      setState: {},
      baseState: {},
      choseData: [],
      tableParams: {
        pageNum: 1,
				pageSize: 10,
				deviceName: null,
				imei: null,
				isConnection: null,
        isActivation: null,
        isBinding: null,
        delFlag: 0,
        groupId: -1,
        deviceState: 0,
      },
      tableData: [],
      tableTotal: 0,
      deviceList: null,
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    groupId: {
      type: String,
      default: null
    }
  },
  watch: {
    show:function(value){
      this.showDevice = value
      if(value) {
        this.choseData = []
        this.fetchData()
      }
    }
  },
  methods: {
    sizeChange(val) {
      this.tableParams.pageNum = 1
      this.tableParams.pageSize = val
      this.fetchData()
    },
    pageChange(val) {
      this.tableParams.pageNum = val
      this.fetchData()
    },
    checkLang() {
      let langType = this.$root.getStorage('lang')
      if(langType == 'en') {
        this.setState = enDeviceConfigData
        this.baseState = enBaseState
      } else {
        this.setState = deviceConfigData
        this.baseState = baseState
      }
    },
    searchAction(reset) {
      if(reset) {
        this.tableParams = {
          pageNum: 1,
          pageSize: 10,
          deviceName: null,
          imei: null,
          isConnection: null,
          isActivation: null,
          isBinding: null,
          delFlag: 0,
          groupId: -1,
          deviceState: 0,
        }
      } else {
        this.tableParams.pageNum = 1
      }
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      this.request({
          url: '/device/page',
          method: 'post',
          data: this.$root.optionProcess(this.tableParams)
        }).then(response => {
          this.deviceList = response.rows
          this.tableTotal = response.total
          this.listLoading = false
        }).catch(error => {
          this.deviceList = []
          this.listLoading = false
          this.$message({
            message: error.errmsg,
            type: 'error',
            duration: 3 * 1000
          })
      })
    },
    choseDevice(value) {
      this.choseData = value
    },
    choseDone(value) {
      if(this.choseData.length <= 0) {
        this.$message({
          message: '请选择要添加的设备',
          type: 'error',
          duration: 3 * 1000
        })
        return
      }
      this.loading = true
      var list = []
      for(var i in this.choseData) {
        var item = this.choseData[i]
        list.push(item.id)
      }
      this.request({
        url: '/device/update/group',
        method: 'post',
        data: {
          groupId: this.groupId,
          deviceIds: list
        }
      }).then(response => {
        this.loading = false
        this.showDevice = false
        this.$emit('reload')
        this.$message({
          message: this.$root.lang.confirm.addSuccess,
          type: 'success',
          duration: 3 * 1000
        })
      }).catch(error => {
        this.loading = false
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
    closeDialog() {
      this.$emit('receive',{
        key: 'showChose',
        value: this.showDevice
      })
    },
  },
  created() {
    this.checkLang()
    this.fetchData()
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
@import '@/css/base.scss';
.app-container {
  .edit-form {
    width: 700px;
    textarea {
      width: 88%;
      height: 120px;
      resize: none;
    }
  }
  .el-input {
    display: inline-block;
    height: 47px;
    width: 88%;
  }
  .el-upload-list {
    display: table;
  }
  .push-time {
    margin-bottom: 10px;
    .el-input__prefix {
      height: auto;
    }
  }
  .begin-time,
  .end-time {
    display: inline-block;
    width: auto;
  }
  .fa-plus-circle,
  .fa-minus-circle {
    margin-left: 4px;
    font-size: 24px;
    opacity: 0.7;
  }
  .fa-plus-circle:hover,
  .fa-minus-circle:hover {
    opacity: 1;
    cursor: pointer;
  }
  .fa-minus-circle {
    /*color: $cancel-color;*/
  }
}

</style>